<template>
  <div>
    <el-card>
      <div>
        <el-page-header @back="back" content="住户添加"> </el-page-header>
      </div>
    </el-card>
    <el-card>
      <div slot="header">基本信息</div>
      <div>
        <el-form ref="form" :model="form" label-width="80px" :rules="rules" :inline-message=true >
          <el-form-item label="业主姓名" prop="name" >
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="phone" >
            <el-input v-model="form.phone"></el-input>
          </el-form-item>
          <el-form-item label="身份证号" prop="idCode" >
            <el-input v-model="form.idCode" disabled></el-input>
          </el-form-item>
          <el-form-item label="楼栋号" prop="houseCode" >
            <el-input v-model="form.building"></el-input>
          </el-form-item>
          <el-form-item label="门牌号" prop="roomCode" >
            <el-input v-model="form.room"></el-input>
          </el-form-item>
          <el-form-item label="房产编号" prop="propertyCode" >
            <el-input v-model="form.propertyCode"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="update">提交</el-button>

          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  mounted(){
    let p = JSON.parse(localStorage.getItem('param'));
    this.form.name = p.name
    this.form.phone = p.phone
    this.form.idCode = p.idCode
    this.form.building = p.building
    this.form.room = p.room
    this.form.propertyCode = p.propertyCode
    this.form.propertyIndex = p.propertyIndex
  },
  computed:{
    ...mapState(['current_property_index']),
  },
  data() {
    return {
      rules:{
        name: [
          {required: true, message:'请输入必要信息', trigger: 'blur'},
          
        ],
        phone: [
          {required: true, message:'请输入必要信息', trigger: 'blur'},
         
          
        ],
        idCode:  [
          {required: true, message:'请输入必要信息', trigger: 'blur'},
            { min: 18, max: 18, message: '请输入正确的格式', trigger: 'blur' }
         
        ],
        building:  [
          {required: true, message:'请输入必要信息', trigger: 'blur'},
        ],
        room: [
          {required: true, message:'请输入必要信息', trigger: 'blur'},
        ],
        propertyCode:  [
          {required: true, message:'请输入必要信息', trigger: 'blur'},
        ],
      },
      form: {
        name: "",
        phone: "",
        idCode: "",
        building: "",
        room:"",
        propertyCode: "",
      },
    };
  },
  methods:{
    update(){
      this.form.propertycode = this.form.propertyCode
      this.$store.commit('update_db_user',this.form)
      this.$router.push('household-show')
      this.$message.success('修改成功')
    },
    back(){
      this.$router.go(-1)
    }
  }
};
</script>

<style scoped>
.el-card {
  margin-top: 2rem;
}
.el-form {
  max-width: 800px;
  margin: auto;
  width: 80%;
}
.el-button {
  min-width: 5rem;
}
</style>